﻿<h3>SpreadJS Layout</h3>

<p>
    The sample below shows how to bind some properties of spread and sheet bilaterally.
</p>

<gcspread-sheets id="ss"
    newtabvisible="{{newTabVisible}}"
    tabstripvisible="{{tabStripVisible}}"
    showhorizontalscrollbar="{{showHorizontalScrollbar}}"
    showverticalscrollbar="{{showVerticalScrollbar}}"
    backcolor="{{backColor}}">
    <sheets>
        <sheet rowcount="20" colcount="10"
            frozenRowCount="{{frozenRowCount}}"
            frozenColumnCount="{{frozenColumnCount}}"
            frozenTrailingRowCount="{{frozenTrailingRowCount}}"
            frozenTrailingColumnCount="{{frozenTrailingColumnCount}}"
            frozenlineColor="{{frozenlineColor}}"
            rowHeaderVisible="{{rowHeaderVisible}}"
            columnHeaderVisible="{{columnHeaderVisible}}"
            selectionBackColor="{{selectionBackColor}}"
            selectionBorderColor="{{selectionBorderColor}}">
        </sheet>
    </sheets>
</gcspread-sheets>

<table>
    <tr>
        <td>
            <label><input type="checkbox" ng-model="newTabVisible" />newTabVisible</label>
        </td>
        <td>
            <label><input type="checkbox" ng-model="tabStripVisible" />tabStripVisible</label>
        </td>
    </tr>
    <tr>
        <td>
            <label><input type="checkbox" ng-model="showHorizontalScrollbar" />showHorizontalScrollbar</label>
        </td>
        <td>
            <label><input type="checkbox" ng-model="showVerticalScrollbar " />showVerticalScrollbar</label>
        </td>
    </tr>
    <tr>
        <td>
            <label><input type="checkbox" ng-model="rowHeaderVisible" />rowHeaderVisible</label>
        </td>
        <td>
            <label><input type="checkbox" ng-model="columnHeaderVisible" />columnHeaderVisible</label>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" ng-model="backColor" />backColor
        </td>
        <td>
            <input type="text" ng-model="frozenlineColor" />frozenlineColor
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" ng-model="frozenRowCount" />frozenRowCount
        </td>
        <td>
            <input type="text" ng-model="frozenColumnCount" />frozenColumnCount
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" ng-model="frozenTrailingRowCount" />frozenTrailingRowCount
        </td>
        <td>
            <input type="text" ng-model="frozenTrailingColumnCount" />frozenTrailingColumnCount
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" ng-model="selectionBackColor" />selectionBackColor
        </td>
        <td>
            <input type="text" ng-model="selectionBorderColor" />selectionBorderColor
        </td>
    </tr>
</table>
